<template>
	<view class="nav-bar-container">
		<view class="demo">
			<view class="nav-bar" :style="{top:top}">
			<view class="icon-view" @click="goBack">
				<uni-icons type="left" :color="color" v-if="isIcon" :size="size" ></uni-icons>
			</view>
            <text class="nav-bar-title" :style="{color:'#000'}">
                {{ title }}
            </text>
		</view>
		</view>
		<view class="nav-bar-content">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
    size: {
        type: Number,
        default: 26,
    },
    color: {
        type: String,
        default: '#fff',
    },
    title: {
        type: String,
        default: '',
    },
    isIcon: {
        type: Boolean,
        default:true, 
    },
	top:{
		type: String,
		default: '75rpx',
	},
	brg:{
		type: String,
		default: '',
	},
	colorText:{
		type: String,
		default: '#fff',
	}
})
// 返回上一页
const goBack = () => {
	uni.navigateBack()
}
</script>

<style>
	.nav-bar-container{
		min-height: 100vh;
		width: 100%;
        position: relative;
	}
	.demo{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 110rpx;
		padding-top: 110rpx;
	}
	.nav-bar{
		height: 110rpx;
		/* position: absolute;
		top: 0;
		left: 0;
		z-index: 100; */
		background-color: transparent;
		padding: 0 30rpx;
        /* display: flex;
        align-items: center; */
     
	}
	
	/* uni-icons 样式 */
	.uni-icons {
		cursor: pointer;
	}
	.nav-bar-title{
        position: absolute;
        top: 110rpx;
        left: 50%;
        transform: translate(-70%,0);
        font-size: 32rpx;
		font-weight: 500;
		z-index: 66;
    }
	.nav-bar-content{
        position: absolute;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100%;
        z-index: 1;
    }
	.icon-view{
		position: absolute;
		left: 30rpx;
		top: 100rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		z-index: 66;
	}
</style>